<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器</title>
    <style>
        /* 顺序不能乱，一定要按照顺序写 */
        /* 1，未访问的链接的颜色 */
        /* a:link{
            color: rgba(19, 7, 69, 0.5);
            text-decoration: none;
        } */
        /* 2，点击过的链接的颜色 */
        /* a:visited{
            color: rgb(139, 113, 0);
        } */
        /* 3，鼠标经过链接的颜色 */
        /* a:hover{
            color: darkgreen;
        } */
        /* 4，鼠标正在按下但没有弹起时候链接的颜色 */
        /* a:active{
            color: darkmagenta;
        } */ 
        /*  */
        /*  */
        /*  */
        /* 实际开发时常用的写法 */
        a {
            columns: #333333;
            /* 去除下划线的作用 */
            text-decoration: none;
        }
        a:hover{
            width: 150px;
            height: 50px;
            background-color: rgb(161, 20, 20);
            /* 把行内元素a转换为块级元素 */
            /* 把行内元素a转换为块级元素 */
            /* 把行内元素a转换为块级元素 */
            /* 把行内元素a转换为块级元素 */
            /* 把行内元素a转换为块级元素 */
            display: block;
            /* 加下划线的作用 */
            text-decoration: underline;
        }
        /* ：focus为类选择器用于选取焦点的表单元素 */
        input:focus {
            background-color: blue;
        }
    </style>
</head>
<body>
    <a href="">好像有点小18</a><br>
    <a href="">好像有点小28</a><br>
    <a href="">好像有点小38</a><br>
    <a href="">好像有点小48</a><br>
    <a href="">好像有点小58</a><br>
    <a href="">好像有点小68</a><br>
    <a href="">好像有点小78</a><br>
    <a href="">好像有点小88</a><br>
    <input type="text">
    <input type="text">
    <input type="text">
</body>
</html>